<template>
  <view class="index">
    <view class="search_wrapper">
      <view class="search_container">
        <input class="input" v-model="searchText" placeholder="请输入您想搜索的内容" />
        <view class="btn" @click="searchClick">搜索</view>
      </view>
			<view style="height: 30rpx;"></view>
      <view class="shai-view stiky">
        <view class="view1" @click="datePicker('range')">
          <text class="date">{{rangetime.length>0?rangetime[0] + '\n' + rangetime[1]:'时间'}}</text>
          <image class="jian" mode="aspectFill" src="@/static/images/xiala.png"></image>
        </view>
        <view style="width: 20rpx;"></view>
        <picker class="view1" @change="bindPickerChange" :value="typeIndex" :range="typeArr">
          <text class="date">{{typeIndex!=null?`${typeArr[typeIndex] == '全部' ? '类型':typeArr[typeIndex]}`:'类型'}}</text>
          <image class="jian" mode="aspectFill" src="@/static/images/xiala.png"></image>
        </picker>
				
				<picker class="view1" @change="bindPickerChange" :value="typeIndex" :range="typeArr">
				  <text class="date">{{typeIndex!=null?`${typeArr[typeIndex] == '全部' ? '社区筛选':typeArr[typeIndex]}`:'社区筛选'}}</text>
				  <image class="jian" mode="aspectFill" src="@/static/images/xiala.png"></image>
				</picker>

      </view>
    </view>
    <view style="height: 230rpx;"></view>

    <template v-if="dataArr && dataArr.length > 0">
      <actListVue style="margin: 0rpx 30rpx;" :dataArr="dataArr"></actListVue>
      <u-loadmore :status="status" />
    </template>
    <template v-else>
      <u-empty mode="data" width="400rpx" icon="/static/images/empty.png" textSize="28rpx"></u-empty>
    </template>


    <view style="height: 30rpx;"></view>



    <uni-popup ref="popup2" />
    <mx-date-picker :show="showPicker" :type="type" :value="rangetime" :show-tips="true" :begin-text="'开始时间'"
      :end-text="'结束时间'" :showClear="true" :show-seconds="true" @clear="timeClear" @confirm="timeChoose"
      @cancel="timeCancel" />

  </view>
</template>

<script>
  import actListVue from '@/components/activity/actList.vue'
  import MxDatePicker from "@/components/mx-datepicker/mx-datepicker"
  export default {
    data() {
      return {
        dataArr: null,
        typeIndex: null,
        typeTotalArr: [],
        typeArr: [],
        type: '',
        rangetime: [],
        showPicker: false,
        status: 'loadmore',
        pageSize: 1,
        searchText: '',
        type_id1: ''
      }
    },
    components: {
      actListVue,
      MxDatePicker
    },
    onPullDownRefresh() {
      this.pageSize = 1
      this.status = 'loadmore';
      this.indexInfo(true)
    },
    onReachBottom() {
			return
      if (this.status == 'nomore') {
        console.log('没有更多了哦')
        return
      }
      this.status = 'loading';
      this.pageSize = this.pageSize + 1;
      console.log('pageSize--->', this.pageSize)
      this.indexInfo(true)
    },
    onLoad(options) {
      if (options.title) {
        this.searchText = options.title
      }
			
			
			
			this.dataArr = [{"id":357,"user_id":1,"title":"功能室1","sort_id":2,"acticity_s_time":"2025-01-18 15:00:00","acticity_e_time":"2025-01-18 18:00:00","application_s_time":"2025-01-08 00:00:00","application_e_time":"2025-02-18 18:00:00","numbers":200,"status":1,"address_area":"解放大街","address_place":"菜馆2楼","longitude":"114.58077","latitude":"38.081463","image_url":"https://file.huaxinjiafu.com/upload/17363225346134.jpg","is_together":2,"is_entry":1,"is_passport":2,"is_free_experience":2,"is_season":2,"details":"<img src=\"https://file.huaxinjiafu.com/upload/17363284937485.jpg\" alt=\"\"><img src=\"https://file.huaxinjiafu.com/upload/17363284999115.jpg\" alt=\"\"><img src=\"https://file.huaxinjiafu.com/upload/17363285058095.jpg\" alt=\"\"><img src=\"https://file.huaxinjiafu.com/upload/17363285139646.jpg\" alt=\"\">","moment_img":"","share_text":"寻找年味、分享快乐\r\n体验传统民俗\r\n写对联、做红包\r\n画糖画、品美食\r\n做游戏、迎奖品\r\n用欢乐奏响新春序章","owner_id":445380,"owner_mobile":"赵开瑞","activity_category":1,"activity_type":1,"activity_price":"0.10","activity_cost":"0.00","member_price":"0.10","is_notice":0,"activity_label":"","sign_url":"http://insurance-consult.oss-cn-beijing.aliyuncs.com/ass/677e45e8aea73.png","group_id":0,"type_id":0,"created_at":"2025-01-08 15:16:23","updated_at":"2025-01-20 14:15:46","owner_ids":[],"is_special":0,"activity_time":["2025-01-18 15:00:00","2025-01-18 18:00:00"],"application_time":["2025-01-08 00:00:00","2025-02-18 18:00:00"],"h_desc":"活动结束","h_status":3,"b_desc":"报名中","b_status":1,"users":[{"id":3095,"user_id":10140,"info":{"nickname":"姚宁","avatar":"https://file.huaxinjiafu.com/IMAGES/IMG1736908025fDD0vM6Q.jpg"}},{"id":3092,"user_id":10171,"info":{"nickname":"神经蛙","avatar":"https://file.huaxinjiafu.com/IMAGES/IMG1736749355jbnEQSGV"}}],"owner":null,"group_info":null}]
			
			return
      this.actype()
      this.indexInfo(true)
    },
    methods: {
      searchClick() {
        this.pageSize = 1
        this.status = 'loadmore';
        this.indexInfo(true)
      },
      actype() {
        let params = {}
        this.$http.get(this.$api.actype, params).then(res => {
          console.log(res)
          this.tabList = res.data

          this.typeTotalArr = res.data
          this.typeTotalArr.forEach(item => {
            this.typeArr.push(item.name)
          })
          console.warn(this.typeArr)

          this.tabList.forEach((item) => {
            item.icon = `${process.env.VUE_APP_Public}${item.icon}`
            return item
          })
        }).catch(err => {
          console.log(err)
        })
      },
      async indexInfo(HUD) {
        try {
          let params = {}
          if (this.rangetime.length == 0) {
            params = {
              page: this.pageSize,
              pageSize: 10,
              title: this.searchText //文字搜索
            }
          } else {
            params = {
              page: this.pageSize,
              pageSize: 10,
              'acticity_s_time[0]': this.rangetime.length > 1 ? this.rangetime[0] : '',
              'acticity_s_time[1]': this.rangetime.length > 1 ? this.rangetime[1] : '',
              title: this.searchText //文字搜索
            }
          }
          if (this.type_id1) {
            params.sort_id = this.type_id1
          }

          let result = await this.$http.get(this.$api.indexInfo, params, HUD)
          uni.stopPullDownRefresh()
          if (result.code == 200) {
            let arr = result.data.activity_special.items
            // let arr = result.data.activity

            if (this.pageSize == 1) {
              this.dataArr = []
              this.dataArr = arr
            } else {
              this.dataArr = [...this.dataArr, ...arr]
            }
					
            //
            // if(this.pageSize >= result.data.activity_special.pageInfo.totalPage ){							
            // 	this.status = 'nomore'				
            // }else{
            // 	this.status= 'loadmore'
            // }

            if (this.pageSize < 10) {
              this.status = 'nomore'
            } else {
              this.status = 'loadmore'
            }


          } else {
            uni.showToast({
              icon: 'none',
              title: result.message
            })
          }
        } catch (e) {
          //TODO handle the exception
          console.log(e)
        }
      },
      datePicker(type) { //显示
        this.type = type;
        this.showPicker = true;
        this.$refs.popup2.open('center')
      },
      timeClear() {
        this.rangetime = []
        this.timeCancel()
        this.indexInfo(true)
      },
      timeChoose(e) { //选择
        this.showPicker = false;
        this.$refs.popup2.close()
        if (e) {
          this.rangetime = e.value;
          console.log(this.rangetime, 'rangetime')
          this.pageSize = 1
          this.status = 'loading'
          //
          this.indexInfo()
        }
      },
      timeCancel() {
        this.showPicker = false;
        this.$refs.popup2.close()
      },
      bindPickerChange(e) {
        this.typeIndex = e.detail.value
        console.log(e)

        this.pageSize = 1
        this.status = 'loading'
        this.type_id1 = this.typeTotalArr[this.typeIndex].id
        this.indexInfo(true)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .search_wrapper {
    position: fixed;
    z-index: 9;
    left: 0rpx;
    right: 0rpx;
		background: $UNI-backgroundColor;
    .search_container {
      background: white;
      margin: 0rpx 60rpx;
      margin-top: 30rpx;
      height: 80rpx;
      border-radius: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0rpx 10rpx 0rpx 30rpx;

      .input {
        font-size: 26rpx;
        flex: 1;
        padding-right: 30rpx;
      }

      .btn {
        border-radius: 60rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        background: #575757;
        font-size: 29rpx;
        color: white;
        width: 140rpx;
      }
    }
  }

  .shai-view {
    height: 100rpx;
    padding: 0rpx 30rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .more {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .date {
        color: #575757;
        font-size: 26rpx;
        margin-right: 5rpx;
      }

      .jian {
        width: 20rpx;
        height: 20rpx;
      }
    }

    .view1 {
			flex: 1;
      // width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10rpx 0rpx;
      border-radius: 40rpx;
      text-align: center;
      margin: 0rpx 0rpx;

      .date {
        color: #575757;
        font-size: 28rpx;
        margin-right: 15rpx;
      }

      .jian {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }
</style>